home *** CD-ROM | disk | FTP | other *** search
/ MacHome 2001 June / MacHome Magazine Demo Disc June 2001.iso / Stuff / Software / Graphic / PageSpinner 3.0.2 / Examples / JavaScript / PopupMenu < prev    next >
Encoding:
Text File  |  2000-10-16  |  2.6 KB  |  67 lines  |  [TEXT/JyWs]
  1. <html>
  2. <head>
  3. <title>Popup Menu</title>
  4. </head>
  5.  
  6. <body bgcolor="FFFFFF">
  7. <h1>JavaScript Popup Menu</h1>
  8.  
  9. <p><b>This page contains popup menu used for selecting a page or URL</b></p>
  10.  
  11. <p>Here is an example on how JavaScript can be used in a form with a popup menu that has links to other pages.</p>
  12.  
  13. <form>
  14. <select name="menu">
  15. <option selected value="index.html">Contents 
  16. <option value="groucho.html">Groucho 
  17. <option value="harpo.html">Harpo 
  18. <option value="chico.html">Chico 
  19. <option value="zeppo.html">Zeppo 
  20. </select>
  21.  
  22. <input type=BUTTON value="Go" onClick="top.location.href = this.form.menu.options[this.form.menu.selectedIndex].value">
  23. <br>
  24. </form> 
  25.  
  26. <hr>
  27. <p>
  28. <b>How to use</b>
  29. <blockquote>
  30. <p>The source of the popup menu looks like this:</p>
  31.  
  32. <pre><FORM>
  33. <SELECT NAME="menu">
  34. <OPTION VALUE="index.html" SELECTED>Contents 
  35. <OPTION VALUE="groucho.html">Groucho 
  36. <OPTION VALUE="harpo.html">Harpo 
  37. <OPTION VALUE="chico.html">Chico 
  38. <OPTION VALUE="zeppo.html">Zeppo 
  39. </SELECT>
  40.  
  41. <INPUT TYPE=Button VALUE="Go" 
  42. onClick="top.location.href = 
  43. this.form.menu.options[this.form.menu.selectedIndex].value">
  44. </FORM></pre>
  45.  
  46. <p>
  47. Change the links and text to be displayed in the menu by editing the lines containing the <code>OPTION</code> tags. Note that you can also use full URL's in the VALUE attribute.</p>
  48.  
  49. <p>
  50. Change the text of the button in the Value attribute of <br>
  51. <code> <INPUT TYPE=BUTTON VALUE="Go"</code> ...</p>
  52. </blockquote>
  53. <hr>
  54. <p>
  55. <b>Programming notes</b>
  56. <blockquote>
  57. <p>The actual JavaScript is in the button's onClick handler. The JavaScript array <code>this.form.menu.options</code> is an array of the option tags (with its contents)  in the form named "menu". To find which menu item that is selected we can use the property <code>this.form.menu.selectedIndex</code>, that holds the index of the selected item.</p>
  58.  
  59. <p>
  60. We then get the name of the page by accessing the value attribute of the selected  item in the array with the expression <code>this.form.menu.options[this.form.menu.selectedIndex].value</code>.</p>
  61.  
  62. <p>
  63. <code>top.location.href</code> is the address of the url to be displayed in the window. Since we set <code>top.location</code> to contain the new pages URL, the new page will be displayed in the entire window, even if our page is inside a frame. To get a page to be displayed in a specific frame is an exercise left to the reader <font size="-2" face="Monaco, Courier">;-)</font>. (You can also check out the Programming notes for the <a href="PopupMenu2">second JavaScript Popup Menu</a> to get a hint).</p>
  64. </blockquote>
  65. </body>
  66. </html>
  67.